<template>
    <div>
        <header class="navbar-wrapper">
            <div class="navbar navbar-fixed-top">
                <div class="container cl">
                    <a class="navbar-logo hidden-xs" href="">
                        <img class="logo" src="" alt="" />
                    </a>
                    <a class="logo navbar-logo-m visible-xs" href="">我的博客</a>
                    <a aria-hidden="false" class="nav-toggle Hui-iconfont visible-xs" href="javascript:void(0);" >&#xe667;</a>
                    <nav class="nav navbar-nav nav-collapse w_menu" role="navigation">
                        <ul class="cl">
                            <li class="active"> <a href="" data-hover="首页">首页</a> </li>
                            <li> <a href="" data-hover="关于我">关于我</a> </li>
                            <li> <a href="" data-hover="碎言碎语">碎言碎语</a> </li>
                            <li><a href="" data-hover="学无止尽">学无止尽</a></li>
                            <li> <a href="" data-hover="留言板">留言板</a> </li>
                        </ul>
                    </nav>
                    <nav class="navbar-nav navbar-userbar hidden-xs hidden-sm " style="top: 0;">
                        <ul class="cl">
                            <li class="userInfo dropDown dropDown_hover">
                                <a href=""  ><img class="avatar size-S" src="" title="">登入</a>
                            </li>
                        </ul>
                    </nav>
                </div>
            </div>
        </header>
    </div>
</template>

<script>
    export default {
        name: "MainTarBar"
    }
</script>

<style scoped>
    .navbar-wrapper {
        height: 45px;
    }
    .navbar.navbar-fixed-top {
        border-bottom: 1px #222 solid;
    }
    .navbar-fixed-top {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1030;
    }
    .navbar {
        position: relative;
        z-index: 1030;
        background-color: #fff;
    }
    .container {
        padding-right: 15px;
        padding-left: 15px;
        margin-right: auto;
        margin-left: auto;
    }
    .cl, .clearfix {
        zoom: 1;
    }
    .navbar .logo {
        height: 44px;
        line-height: 44px;
        margin-right: 10px;
        float: left;
    }
    img {
        border: 0;
        vertical-align: middle;
    }
    ul {
        list-style: none;
    }
    .navbar-nav>ul>li, .navbar-nav>ul>li>a {
        line-height: 44px;
        font-size: 14px;
    }
    .nav>ul>li {
        position: relative;
        float: left;
    }


    .navbar .container .navbar-userbar {
        top: 8px;
        right: 32px;
    }
    .navbar-nav>ul>li, .navbar-nav>ul>li>a {
        line-height: 44px;
        font-size: 14px;
    }
</style>
